<template>
  <div class="block" >
    <el-carousel trigger="click" height="150px" style="width: 315px;margin: auto;" arrow="always" >
      <el-carousel-item v-for="item in list" :key="item.id" >
        <h3 class="small"><img class="small" :src="item.src" alt=''/></h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .small{
    width:315px;
    height:150px;
    max-width: 100%;
    max-height: 100%;
  }
</style>
<script>
  import axios from "axios";
    export default {
      name: "fluid",
      data(){
        return {
          list:[]
        }
      },
      created() {
        // axios.get('http://localhost:8080/fluidPic/list').then(
        //         Response => {
        //           console.log(Response.data.data.fluidPicList);
        //           this.list = Response.data.data.fluidPicList;
        //         },
        //         error =>{
        //
        //         }
        // )
        var _this = this;
        _this.axios({
          method: "get",
          url: "/fluidPic/list",
        }).then(function (resp) {
          _this.list = resp.data.data.fluidPicList;
          console.log('list:'+_this.list);
        })
      }
    }
</script>

<style scoped>

</style>
